<template>
	<div class="widget">
		<li class="widget-item">
			<p class="widget-title">标题</p>
			<el-input type="text" class="val" size="mini" @blur="commitData" v-model="formData.title" />
		</li>
		<li class="widget-item">
			<p class="widget-title">动作</p>
			<el-select
				v-model="formData.action"
				class="widget-select"
				@change="actionChange"
				size="mini"
				:popper-append-to-body="false"
				popper-class="select-popper"
				placeholder="请选择"
			>
				<el-option v-for="item in unit_actions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
			</el-select>
		</li>
		<li v-if="displayTarget" class="widget-item">
			<p class="widget-title">目标</p>
			<!-- <el-select
				v-model="formData.target_units"
				class="widget-select"
				@change="commitData"
				size="mini"
				:popper-append-to-body="false"
				popper-class="select-popper"
				placeholder="请选择"
			>
				<el-option v-for="item in enemy_unit_types" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select> -->
			<el-input type="text" class="val" size="mini" @blur="commitData" v-model="formData.target_units" />
		</li>
		<li v-if="displayAddress" class="widget-item">
			<p class="widget-title">参考点</p>
			<el-select
				v-model="formData.address"
				class="widget-select"
				@change="commitData"
				size="mini"
				:popper-append-to-body="false"
				popper-class="select-popper"
				placeholder="请选择"
			>
				<el-option v-for="item in addresss" :key="item.value" :label="item.label" :value="item.value"> </el-option>
			</el-select>
		</li>
		<li v-if="displayLonLan" class="widget-item">
			<div>
				<p class="widget-title"><span class="must">* </span>经度</p>
				<el-input type="text" class="val" size="mini" @blur="commitData" v-model="formData.lon" />
			</div>
			<div>
				<p class="widget-title"><span class="must">* </span>纬度</p>
				<el-input type="text" class="val" size="mini" @blur="commitData" v-model="formData.lan" />
			</div>
		</li>
	</div>
</template>
<script>
export default {
	props: ["data"],
	watch: {
		data(val) {
			console.log("data", val);
		},
	},
	data() {
		return {
			content: {},
			formData: {
				unit_num: 1,
			},
			unit_types: null,
			unit_states: null,
			addresss: [],
			unit_actions: [],
			enemy_unit_types: null,
			displayTarget: true,
			displayAddress: false,
			displayLonLan: false,
			units: [],
			defaultValue: "",
		};
	},
	methods: {
		commitData() {
			let content = JSON.parse(JSON.stringify(this.formData));
			this.$EventBus.$emit("defaultValue", content);
		},
		getUnitTypes() {
			this.unit_types = [
				{ label: "无人机", value: "uuv" },
				{ label: "无人艇", value: "ship" },
			];
		},
		getEnemyUnitTypes() {
			this.enemy_unit_types = [
				{ label: "无人机", value: "uuv" },
				{ label: "无人艇", value: "ship" },
				{ label: "地面雷达", value: "radar" },
			];
		},
		getUnitActions() {
			this.unit_actions = [
				{ label: "设置编队", value: "setting" },
				{ label: "巡逻", value: "patrol" },
				{ label: "攻击", value: "attack" },
			];
		},
		getUnitState() {
			this.unit_states = [
				{ label: "全部", value: "all" },
				{ label: "就绪", value: "ready" },
				{ label: "任务中", value: "busy" },
			];
		},
		getAddresss() {
			this.addresss = [
				{ label: "智能体选择", value: "0" },
				{ label: "参考点1", value: "1" },
				{ label: "参考点2", value: "2" },
				{ label: "参考点3", value: "3" },
				{ label: "参考点4", value: "4" },
				{ label: "参考点5", value: "5" },
				{ label: "参考点6", value: "6" },
				{ label: "参考点7", value: "7" },
				{ label: "参考点8", value: "8" },
				{ label: "参考点9", value: "9" },
				{ label: "参考点10", value: "10" },
				{ label: "参考点11", value: "11" },
				{ label: "参考点12", value: "12" },
				{ label: "参考点13", value: "13" },
				{ label: "参考点14", value: "14" },
				{ label: "参考点15", value: "15" },
				{ label: "参考点16", value: "16" },
				{ label: "参考点17", value: "17" },
				{ label: "参考点18", value: "18" },
				{ label: "参考点19", value: "19" },
				{ label: "参考点20", value: "20" },
				{ label: "参考点21", value: "21" },
				{ label: "参考点22", value: "22" },
				{ label: "参考点23", value: "23" },
				{ label: "参考点24", value: "24" },
				{ label: "参考点25", value: "25" },
				{ label: "参考点26", value: "26" },
				{ label: "参考点27", value: "27" },
				{ label: "参考点28", value: "28" },
				{ label: "参考点29", value: "29" },
				{ label: "参考点30", value: "30" },
				{ label: "参考点31", value: "31" },
				{ label: "参考点32", value: "32" },
				{ label: "参考点33", value: "33" },
				{ label: "参考点34", value: "34" },
				{ label: "参考点35", value: "35" },
				{ label: "参考点36", value: "36" },
				{ label: "参考点37", value: "37" },
				{ label: "参考点38", value: "38" },
				{ label: "参考点39", value: "39" },
				{ label: "参考点40", value: "40" },
				{ label: "参考点41", value: "41" },
				{ label: "参考点42", value: "42" },
				{ label: "参考点43", value: "43" },
				{ label: "参考点44", value: "44" },
				{ label: "参考点45", value: "45" },
				{ label: "参考点46", value: "46" },
				{ label: "参考点47", value: "47" },
				{ label: "参考点48", value: "48" },
				{ label: "参考点49", value: "49" },
				{ label: "参考点50", value: "50" },
				{ label: "参考点51", value: "51" },
				{ label: "参考点52", value: "52" },
				{ label: "参考点53", value: "53" },
				{ label: "参考点54", value: "54" },
				{ label: "参考点55", value: "55" },
				{ label: "参考点56", value: "56" },
				{ label: "参考点57", value: "57" },
				{ label: "参考点58", value: "58" },
				{ label: "参考点59", value: "59" },
				{ label: "参考点60", value: "60" },
				{ label: "参考点61", value: "61" },
				{ label: "参考点62", value: "62" },
				{ label: "参考点63", value: "63" },
				{ label: "参考点64", value: "64" },
				{ label: "参考点65", value: "65" },
				{ label: "参考点66", value: "66" },
				{ label: "参考点67", value: "67" },
				{ label: "参考点68", value: "68" },
				{ label: "参考点69", value: "69" },
				{ label: "参考点70", value: "70" },
				{ label: "参考点71", value: "71" },
				{ label: "参考点72", value: "72" },
				{ label: "参考点73", value: "73" },
				{ label: "参考点74", value: "74" },
				{ label: "参考点75", value: "75" },
				{ label: "参考点76", value: "76" },
				{ label: "参考点77", value: "77" },
				{ label: "参考点78", value: "78" },
				{ label: "参考点79", value: "79" },
				{ label: "参考点80", value: "80" },
				{ label: "参考点81", value: "81" },
				{ label: "参考点82", value: "82" },
				{ label: "参考点83", value: "83" },
				{ label: "参考点84", value: "84" },
				{ label: "参考点85", value: "85" },
				{ label: "参考点86", value: "86" },
				{ label: "参考点87", value: "87" },
				{ label: "参考点88", value: "88" },
				{ label: "参考点89", value: "89" },
				{ label: "参考点90", value: "90" },
				{ label: "参考点91", value: "91" },
				{ label: "参考点92", value: "92" },
				{ label: "参考点93", value: "93" },
				{ label: "参考点94", value: "94" },
				{ label: "参考点95", value: "95" },
				{ label: "参考点96", value: "96" },
				{ label: "参考点97", value: "97" },
				{ label: "参考点98", value: "98" },
				{ label: "参考点99", value: "99" },
				{ label: "参考点100", value: "100" },
			];
		},
		getUnits() {
			this.units = [
				{ label: "飞行编队1", value: "formation1" },
				{ label: "飞行编队2", value: "formation2" },
				{ label: "无", value: "" },
			];
		},
		actionChange() {
			console.log("actionchagne");
			if (this.formData.action == "attack") {
				this.displayTarget = true;
				this.displayAddress = false;
				this.displayLonLan = false;
			}
			if (this.formData.action == "patrol") {
				this.displayTarget = false;
				// this.displayAddress = true;
				this.displayLonLan = true;
			}
			if (this.formData.action == "setting") {
				this.displayTarget = false;
				this.displayAddress = false;
				this.displayLonLan = false;
			}
		},
	},
	mounted() {
		console.log("data", this.data);
		if (this.data) {
			if (typeof this.data == "object") {
				let data = JSON.parse(JSON.stringify(this.data));
				this.formData = data;
			} else this.formData = JSON.parse(this.data);
		}
		this.getUnitTypes();
		this.getUnitActions();
		this.getUnits();
		this.getUnitState();
		this.getEnemyUnitTypes();
		this.getAddresss();
		this.actionChange();
	},
	beforeDestroy() {
		this.commitData();
	},
};
</script>

<style lang="less" scoped>
.val {
	width: 180px;
}

.must {
	color: #d13636;
}
</style>
